<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>Title</title>
  <link rel="stylesheet" href="stylesheets/reset.css">
  <link rel="stylesheet" href="stylesheets/index.css">
</head>
<body>

<div id="bmi">
  <div v-if="isShowResult" class="result">
    你的 BMI 值: {{ bmi }}，身体状态：{{ status }}
  </div>
  <div style="display: flex">
    <div class="calc">
      <h2>免费计算你的身体质量指数 (BMI)</h2>
      <div>
        <label>我的身高:</label>
        <input type="text" v-model.trim="height">
      </div>
      <div>
        <label>我的体重:</label>
        <input type="text" v-model.trim="weight">
      </div>
      <button v-on:click="calcBMI">计算BMI</button>
    </div>
    <div class="status">
      <table>
        <tr>
          <td></td>
          <td>分类</td>
          <td>BMI 范围</td>
        </tr>
        <tr>
          <td>
            <span v-if="status === '偏瘦'">》</span>
          </td>
          <td>偏瘦</td>
          <td><= 18.4</td>
        </tr>
        <tr>
          <td>
            <span v-if="status === '正常'">》</span>
          </td>
          <td>正常</td>
          <td>18.5 ~ 23.9</td>
        </tr>
        <tr>
          <td>
            <span v-if="status === '过重'">》</span>
          </td>
          <td>过重</td>
          <td>24.0 ~ 27.9</td>
        </tr>
        <tr>
          <td>
            <span v-if="status === '肥胖'">》</span>
          </td>
          <td>肥胖</td>
          <td>>= 28.0</td>
        </tr>
      </table>
    </div>
  </div>
  <table class="list">
    <tr>
      <th>#</th>
      <th>日期</th>
      <th>身高</th>
      <th>体重</th>
      <th>BMI</th>
      <th>操作</th>
    </tr>
    <tr v-for="(item, index) in bmiList">
      <td>{{index + 1}}</td>
      <td>{{formatTime(item.createdAt)}}</td>
      <td>{{item.height}}cm</td>
      <td>{{item.weight}}kg</td>
      <td>{{item.bmi}}</td>
      <td>
        <a href="javascript:void(0)">删除</a>
      </td>
    </tr>
  </table>
</div>


<script src="js/vue.js"></script>
<script src="js/zepto.js"></script>
<script src="js/index.js"></script>
</body>
</html>
